<template>
    <div class="notice">
         <page-header @toLastPage="toLastPage">
            <template v-slot:title>
                <div>
                   群公告
                </div>
            </template>
            <template v-slot:right v-if="isAdmin">
                <van-button type="primary" size="small" hairline color="#09BF63" :disabled='disabled' @click="setNotice" >完成</van-button>
            </template>
        </page-header>
        <div class="content">
            <van-field
        v-model="notice"
        rows="1"
        autosize
        label=""
        type="textarea"
        placeholder="请编辑群公告"
        maxlength="500"
        v-if="isAdmin"
        />
        <van-empty image="error" description="当前暂无群公告" v-if="!isAdmin&&!isNotice"/>
        <div class="inf" v-if="!isAdmin&&isNotice">
            <div class="notice-header flex van-hairline--bottom">
                <div class="left">
                    <van-image
                width="1.5rem"
                height="1.5rem"
                radius=".2rem"
                fit="cover"
                :src="groupNotice.avatar"
            />
                </div>
                <div class="right">
                    <div class="name">{{groupNotice.groupName}}</div>
                    <div class="date">{{showTime}}</div>
                </div>
            </div>
            <div class="notice-content">
                {{groupNotice.notice.content}}
            </div>
        </div>
        </div>
        <div class="label" v-if="!isAdmin">
            ----- 只有群主及管理员可以编辑 -----
        </div>
    </div>
</template>
<script>
import pageHeader from '../common/pageHeader';
import {Meteor} from 'meteor/meteor';
import { groupUser,image,user,group } from '../../../api/collections/index';
import time from '../../../api/libs/time';
export default {
     components:{
        pageHeader
    },
    data() {
        return {
            notice:'',
            id:sessionStorage.getItem('user'),
            groupId:this.$route.params.id,
            isNotice:false,
            sendTime:''
        }
    },
    watch:{
        groupNoticeContent(){
            if(this.groupNoticeContent){
                this.notice = this.groupNoticeContent.g_notice.content
            }
        }
    },
    computed:{
        disabled(){
            if(this.notice == this.groupNoticeContent.content){
                return true
            }else{
                return false
            }
        },
        showTime(){
        if(this.sendTime!==''){
            return time.gettime(this.sendTime)
        }
      }
    },
     meteor: {
    $subscribe: {
      'userInf': []
    },
     isAdmin(){
        const groupInf = group.findOne({_id:this.groupId})
        if(groupInf){
            if(groupInf.g_adminId == this.id){
                return true
            }
            else{
                return false
            }
        }
    },
    groupNotice(){
        if(!this.isAdmin){
        const groupInf = group.findOne({_id:this.groupId})
        if(groupInf){
            if(groupInf.g_notice&&groupInf.g_notice.content){
                this.isNotice = true
                const groupUserInf = groupUser.findOne({gid:this.groupId,userId:groupInf.g_adminId})
                this.sendTime = groupInf.g_notice.create_time
                const userInf = user.findOne({_id:groupInf.g_adminId})
                if(groupUserInf&&userInf){
                     groupUserInf.notice = groupInf.g_notice
                    if(groupUserInf.groupName == ''){
                        groupUserInf.groupName = userInf.nickname
                    }
                    const avatar = image.findOne({_id:userInf.avatarId})
                    if(avatar){
                        groupUserInf.avatar = avatar.base64
                    }
                }
                return groupUserInf
            }
            else{
                return this.isNotice = false
            }
        }
        }
    },
    groupNoticeContent(){
        if(this.isAdmin){
            return group.findOne({_id:this.groupId})
        }
    }
    },
    methods:{
        setNotice(){
            this.$dialog.confirm({
            title: '',
            message: '所有群成员将能够查看此公告，是否发布?',
            confirmButtonColor:'#07C160',
            confirmButtonText:'发布'
            })
            .then(() => {
                Meteor.call('group.updateNotice',{
                    id:this.groupId,
                    notice:{
                        content:this.notice,
                        create_time:new Date().getTime()
                    }
                },(err,res)=>{
                    if(err){
                        this.$toast(err)
                    }else{
                        this.$toast.success('群公告发布成功')
                        this.$router.go(-1)
                    }
                })
            })
            .catch(() => {
               
            });
                },
        toLastPage(){
            this.$router.go(-1)
        },
    }
}
</script>
<style scoped>
    .notice{
        min-height: 94.4vh;
        background-color: #fff;
    }
     .header-search{
        position: fixed;
        top: 1.5rem;
        left: 0;
        right: 0;
        z-index: 999;
        box-shadow: 0 .05rem .05rem -.05rem #888;
    }
    .van-cell{
        padding: 0;
    }
    .van-button{
    margin-top: .3rem;
    padding: .25rem .5rem;
    height: auto;
}
    .content{
        margin-top: 1.5rem;
        padding:.7rem .5rem;
    }
    .label{
        position: fixed;
        bottom: 3rem;
        width: 100%;
        text-align: center;
        font-size: .5rem;
    }
    .inf{
        font-size: .5rem;
    }
    .notice-header{
        padding-bottom: .3rem;
    }
    .right{
        margin-left: .5rem;
    }
    .name{
        margin-bottom: .1rem;
    }
    .date{
        color: #999;
    }
    .notice-content{
        margin-top: .5rem;
    }
</style>